<template>
  <div class="fillcontain">
    <head-top></head-top>
    <h1 class="head_title">VIP管理</h1>
    <!-- <div class="search">
          <div class="search_name">搜索名称:<input class="search_name_input" type="text" placeholder="请输入搜索名称"/></div>
          <div class="search_phone">联系电话:<input class="search_name_input" type="text" placeholder="请输入联系电话" maxlength="11"/></div>
          <div class="result" v-show="exportEX">导出</div>
          <div class="result">搜索</div>
          <div class="result">重置</div>
        </div> -->
    <table width="90%" border="1" class="tableCenter" cellspacing="0" cellpadding="0">
      <tr>
        <td width="30%" style="padding-top:25px">
          <div class="sizeForm">
            <el-form ref="form" :model="sizeForm">
              <el-form-item label="*产品品类">
                <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                  <el-option v-for='item in pro' :label="item.proName" :value="item.value" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="活动名称">
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item label="VIP管理">
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item label="产品SN码">
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </td>
        <td width="10%">
          <div class="result">搜索</div>
          <div class="result">重置</div>
        </td>
        <td style="padding-top:20px;display: block;border:0;position:relative">
          <div class="resultInfo">
            <p class="reslut_title">查询结果</p>
            <div class="reslut_Model">产品型号:
              <span>12321321321321321321</span>
            </div>
            <div class="reslut_state">状态:
              <span>12321321321321321321</span>
            </div>
            <div class="reslut_Explain">说明:
              <span>12321321321321321321</span>
            </div>
            <div class="result past">通过</div>
          </div>
        </td>
      </tr>
    </table>
    <div style="width:90%;margin:20px auto ">
      <el-tabs v-model="activeName" @tab-click="handleClick()">
        <el-tab-pane label="已通过" name="first">
          <div class="table_container">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="create_Number" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="sn" label="SN码" width="180">
              </el-table-column>
              <el-table-column prop="pro_name" label="产品品类" width="220">
              </el-table-column>
              <!-- <el-table-column
                prop="sex"
                label="性别"
                width="180">
              </el-table-column> -->
              <el-table-column prop="pro_model" label="产品型号">
              </el-table-column>
              <!-- <el-table-column
                prop="birthday"
                label="出生日期">
              </el-table-column> -->
              <el-table-column prop="phone" label="绑定手机号">
              </el-table-column>
              <el-table-column prop="applyTime" label="申请时长">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleClick()">提醒</el-button>
                  <el-button size="mini" @click="handleClick()">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align:center;display:block;margin-top: 10px;">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="20" layout="total, prev, pager, next" :total="count">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <div class="table_container">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="create_Number" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="sn" label="SN码" width="180">
              </el-table-column>
              <el-table-column prop="pro_name" label="产品品类" width="220">
              </el-table-column>
              <!-- <el-table-column
                prop="sex"
                label="性别"
                width="180">
              </el-table-column> -->
              <el-table-column prop="pro_model" label="产品型号">
              </el-table-column>
              <!-- <el-table-column
                prop="birthday"
                label="出生日期">
              </el-table-column> -->
              <el-table-column prop="phone" label="绑定手机号">
              </el-table-column>
              <el-table-column prop="applyTime" label="申请时长">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleClick()">通过</el-button>
                  <el-button size="mini" @click="handleClick()">驳回</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align:center;display:block;margin-top: 10px;">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="20" layout="total, prev, pager, next" :total="count">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已驳回" name="third">
          <div class="table_container">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="create_Number" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="sn" label="SN码" width="180">
              </el-table-column>
              <el-table-column prop="pro_name" label="产品品类" width="220">
              </el-table-column>
              <!-- <el-table-column
                prop="sex"
                label="性别"
                width="180">
              </el-table-column> -->
              <el-table-column prop="pro_model" label="产品型号">
              </el-table-column>
              <!-- <el-table-column
                prop="birthday"
                label="出生日期">
              </el-table-column> -->
              <el-table-column prop="phone" label="绑定手机号">
              </el-table-column>
              <el-table-column prop="applyTime" label="申请时长">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleClick()">通过</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align:center;display:block;margin-top: 10px;">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="20" layout="total, prev, pager, next" :total="count">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import headTop from '../components/headTop'
import { adminList, adminCount } from '@/api/getData'
export default {
  data () {
    return {
      tableData: [],
      currentRow: null,
      offset: 0,
      limit: 10,
      count: 0,
      currentPage: 1,
      exportEX: true,
      pro: [
        { proName: '油烟机', value: 'youyanji' },
        { proName: '燃气找', value: '1打的sdsa1' }
      ],
      sizeForm: {
        region: '',
      },
      activeName: 'first'
    }
  },
  components: {
    headTop,
  },
  created () {
    this.initData();
  },
  methods: {
    handleClick () { },
    async initData () {
      try {
        const countData = await adminCount();
        if (countData.status == 1) {
          this.count = countData.count;
        } else {
          throw new Error('获取数据失败');
        }
        this.getAdmin();
      } catch (err) {
        console.log('获取数据失败', err);
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      this.offset = (val - 1) * this.limit;
      this.getAdmin()
    },
    newView (val) {
      this.$router.push({ path: './detailed', query: { id: val.row.operation } })
    },
    async getAdmin () {
      try {
        const res = await adminList({ offset: this.offset, limit: this.limit });
        if (res.status == 1) {
          this.tableData = [];
          res.data.forEach(item => {
            const tableItem = {
              create_time: item.create_time,
              user_name: item.user_name,
              admin: item.admin,
              city: item.city,
              operation: item.id
            }
            this.tableData.push(tableItem)
          })
        } else {
          throw new Error(res.message)
        }
      } catch (err) {
        console.log('获取数据失败', err);
      }
    }
  },
}
</script>

<style lang="less">
@import "../style/mixin";
.table_container {
  padding: 20px;
}
.head_title {
  text-align: center;
  padding: 20px 0;
  font-size: 36px;
  width: 90%;
  margin: 0 auto;
}
.sizeForm {
  width: 90%;
}
.el-form-item__content {
  display: flex;
}
.el-form-item__label {
  width: 30%;
}
.el-form-item {
  width: 100%;
}
.tableCenter {
  margin: 0 auto;
}
.result {
  width: 100px;
  text-align: center;
  border: 1px solid #999;
  background-color: #20a0ff;
  padding: 5px;
  color: #fff;
  margin-left: 10px;
  margin: 30px;
}
.resultInfo {
  width: 100%;
  height: 100%;
}
.reslut_title {
  text-align: center;
}
.reslut_Model,
.reslut_state,
.reslut_Explain {
  line-height: 65px;
  margin-left: 20px;
  span {
    margin-left: 20px;
  }
}
.past {
  position: absolute;
  bottom: 30px;
  right: 10px;
}
.table_container {
  // width: 100%;
  padding: 0;
}
</style>
